var canvas = document.getElementById("myCanvas");
var browserWidth = window.innerWidth;
browserWidth = browserWidth - (browserWidth*0.035);
canvas.height = canvas.width = browserWidth;
var isStart = true;

function start(){
	isStart = true;
}
function screenshot(){
	//alert("");
}
//function screenshot(event) {
//    event.preventDefault();  
//    html2canvas(document.body, {  
//    allowTaint: true,  
//    taintTest: false,  
//    onrendered: function(canvas) {  
//        canvas.id = "mycanvas";  
//        //document.body.appendChild(canvas);  
//        //生成base64图片数据  
//        var dataUrl = canvas.toDataURL();  
//        var newImg = document.createElement("img");  
//        newImg.src =  dataUrl;  
//        document.body.appendChild(newImg);  
//    }  
//}); 
//    console.log("---->screenshot end");
//}
function end(){
	isStart = false;
}

//var allPoint = new Array();
//function showThread(points, lineNumber){
//	for(var i=0; i<points.length; i++){
//		if(points[i] != 0){
////			setTimeout(show(points[i], lineNumber), 10);
//			setInterval(show(points[i], lineNumber), 10);
//		}
//	}
//}

/**
 * 绘制图形的方法
 */
var cxt = null;
var oldPoints = new Array();
var paperSpeed = 1;//px
var startX = 0;
var oldX = startX - paperSpeed;
var nextX = oldX;

var oldY = -1;

var timec = 0;
function show(point, lineNumber){
	
	if(!isStart){
		return;
	}
	
	point = parseInt(point);
	
	timec ++;
	if(timec == 2){
		oldX = nextX;//上一个x坐标
		nextX = getX();//下一个x坐标
		timec = 0;
	}
	
	//第一次
	if(oldPoints[lineNumber] == null || oldPoints[lineNumber] == undefined){
		//初始化画笔
		cxt = canvas.getContext("2d");
		cxt.lineWidth = 1;
		cxt.strokeStyle = "#FFF";
		
		//记录点
		oldPoints[lineNumber] = point;
		
//		cxts[lineNumber].moveTo(nextX, getY(point)+getLinePosition(lineNumber));
	}
	//画到末尾，折返
	else if(nextX >= canvas.width){
		oldX = nextX = startX;
//		cxts[lineNumber].moveTo(nextX, getY(point)+getLinePosition(lineNumber));
	}
	//第二次
	else{
		clear(nextX);
		
//		oldY = getY(oldPoints[lineNumber])+getLinePosition(lineNumber);
//		var nextY = getY(point)+getLinePosition(lineNumber);
//		console.log("oldY="+oldY+" nextY="+nextY);
//		if(oldY - nextY > 50 || oldY - nextY < -50){
//			console.log("cha="+(oldY - nextY));
//		}
//		oldY = nextY;
		
		cxt.beginPath();//绘制路径
		if(lineNumber == 1){
			cxt.strokeStyle = "#FFF";
		}
		else if(lineNumber == 2){
			cxt.strokeStyle = "#0F0";
		}
		cxt.moveTo(oldX, getY(oldPoints[lineNumber])+getLinePosition(lineNumber));
		cxt.lineTo(nextX, getY(point)+getLinePosition(lineNumber));
//		console.log(oldX+"--"+nextX);
		oldPoints[lineNumber] = point;
		cxt.stroke();//绘制
		cxt.closePath();
		
	}
	
}

/**
 * 获取 Y 坐标
 * @param num
 * @returns {Number}
 */
function getY(num){
	var result = 140 - parseInt(num);
//	console.log("re==》"+result);
	return result;
}

/**
 * 获取第 num 条线的位置
 * @param num
 * @returns {Number}
 */
function getLinePosition(num){
	var result = canvas.height/7 + (num-1)*80;
//	console.log("-->"+result);
	return result;
}

/**
 * 返回 X 坐标 (横向)
 * @returns {Number}
 */
function getX(){
	var result = oldX + paperSpeed;
	return result;
}

function clear(x){

	var c = canvas.getContext("2d");
	c.beginPath();
	if(x <= 1)
		c.clearRect(0,0,21,500);
	else
		c.clearRect(x,0,20,500);

	/*	
//	c.beginPath();

	c.fillStyle = "#191D28";
	c.fillRect(0, 0, 200, 200);
	
	cxts[i].beginPath();
	cxts[i].clearRect(0, 0, 500,500);

//	cxts[lineNumber].beginPath();
//	cxts.forEach(function (e){ if(e != null && e != undefined){e.clearRect(nextX, 0, 20,500);console.log("e---->"+e)};});
//	canvas.getContext("2d").clearRect(nextX, 0, 20,500);
//	cxts[lineNumber].endPath();

	for(var i=0; i<cxts.length; i++){
		if(cxts[i] != null && cxts[i] != undefined){
////			cxts[i].beginPath();
//			cxts[i].clearRect(0, 0, 500,500);
////			cxts[i].beginPath
////			cxts[i].clearRect(nextX, 0, 1000,500);
			
			cxts[i].fillStyle = "#191D28";
//			cxts[i].fillStyle = "#000";
			cxts[i].fillRect(0, 0, 200,200);
//			cxts[i].strokeStyle = "#FFF";
			
//			console.log("-------------------clear once");
		}
	}
//	canvas.getContext("2d").clearRect(0, 0, 200, 200);
//	console.log("-----> clearRect...   (0, 0, 200, 200");
*/
}